Speech Synthesis

DEMO

變聲器，將輸入的文字用瀏覽器撥放，並可以自由調整撥放的語調跟頻率

實作

1. 抓取要播放的語音文字，透過監聽事件取得所有語言的選單內容

    msg.text = document.querySelector('[name="text"]').value;
   
    speechSynthesis.addEventListener("voiceschanged", populateVoices);
   
    function populateVoices() {
        voices = this.getVoices();
   
        voicesDropdown.innerHTML = voices
            .filter((voice) => voice.lang.includes("en"))
            .map((voice) => {
                return `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`;
            })
            .join("");
    }
   

2. 切換語言時，重新設定播放的語音

    voicesDropdown.addEventListener("change", setVoice);
    function setVoice(e) {
        // 找到對應語言的聲音
        msg.voice = voices.find((voice) => voice.name === e.target.value);
    }
   

3. 播放跟停止撥放

    speakButton.addEventListener("click", toggle);
    stopButton.addEventListener("click", toggle.bind(null, false));
   
    function toggle(startOver = true) {
        speechSynthesis.cancel();
        if (startOver) {
            speechSynthesis.speak(msg);
        }
    }
   

   這裡toggle的用法很直觀的都會使用toggle(false)的方式傳入參數，但eventlistener接收的是一段function，傳入toggle(false)並不會執行，必須要透過bind的方式建立function或arrow function

4. 調整語調、頻率

    options.forEach((option) => {
        option.addEventListener("change", setOption);
    });
   
    function setOption() {
        msg[this.name] = this.value;
        toggle();
    }
   

知識點

• SpeechSynthesisUtterance 是 Web Speech API 的一個類別，它是用於文本到語音轉換的 JavaScript 類別
• speechSynthesis 是Web Speech API的一個介面，用來執行文本朗讀